<!-- 系统管理首页卡片配置 -->
<script lang="ts" setup>
import { cards } from '@/mock/json/admin/index/cardsIndex'
</script>

<template>
  <div class="h-[200px] grid md:grid-cols-4 gap-3">
    <n-card
      v-for="(item, index) in cards"
      :key="index"
      bordered
      class="my-5 shadow-xl !rounded-lg !border-gray-300 !font-bold opacity-75"
    >
      <template #header>
        <div class="font-bold text-2xl">
          {{ item.title }}
        </div>
      </template>
      <template #header-extra>
        <component :is="item.icon" :class="item.iconColor" class="text-4xl" />
      </template>
      <section class="pt-6 text-2xl">
        {{ item.data }}
      </section>
    </n-card>
  </div>
</template>

<style scoped></style>
